<script setup lang="ts">
defineProps<{
	direction:'left'|'right'|'center'
}>()
</script>

<template>  		
	<div class="windows-logo"  :style="`--angle:${direction==='right'? '45deg':(direction==='left'?'-45deg':'0deg')}`">
		<div class="logo">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</template>

<style scoped>

		.windows-logo{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			/* font-size: 30px; */
			color: #fff;			
			perspective:15em;		
		}
		.windows-logo .logo{
			/* --angle:-45deg; */
		    width:3.4em;
			height: 2.8em;
			display: grid;
			grid-template-columns: 1fr 1fr; /* 两列，每列宽度相等，1fr表示剩余空间的一份 */
			grid-template-rows: 1fr 1fr; /* 两行，每行高度相等 */
			grid-gap: 0.2em; /* 网格项目之间的间距为10px */
			transform: rotateY(var(--angle));
		}
		.windows-logo .logo div{
						background-color: rgb(27, 152, 227);
		}
		.system-starting .content .windows-logo div:nth-child(1){
			animation: windows-logo 1s infinite;
		}
</style>